<template>
    <div>
        <el-row class="custom-row">
            <el-col>
                <div class="custom-headline">新增机构信息</div>
            </el-col>
        </el-row>
        <el-row class="custom-firstline"> 机构信息</el-row>
        <el-row class="custom-row">
            <el-col :span="6">
                <p>机构名称</p>
                <el-input v-model="institution.name" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="6">
                <p>机构图片</p>
                <el-upload :headers="headers" action="api/institution/uploadPicture" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="institution.imgSrc" :src="institution.imgSrc" width="50px" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
            </el-col>
            <el-col :span="6">
                <p>机构联系人</p>
                <el-input v-model="institution.headName" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="6">
                <p>联系电话</p>
                <el-input v-model="institution.phone" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="12">
                <p>机构地址</p>
                <el-input v-model="institution.address" placeholder="请输入内容"></el-input>
            </el-col>
        </el-row>
        <el-row class="custom-secondline">
            <el-col :span="12">
                <p>机构简介</p>
                <el-input type="textarea" :rows="2" v-model="institution.intro" placeholder="请输入内容"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button type="primary" @click="exit">返回</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            headers: {
                auth_token: sessionStorage.getItem("auth_token")
            },
            institution: {
                imgSrc: "",
            },
        };
    },
    methods: {
        submit() {
            this.axios.post("api/institution/add", this.institution).then((res) => {
                if ((res.data.code = 200)) {
                    this.$message("添加成功");
                    this.$router.push("institution");
                }
            });
        },
        handleAvatarSuccess(res, file) {
            this.institution.imgSrc = res.data;
        },
        exit() {
            this.$router.push("/institution");
        },
    },
    created() { },
};
</script>

<style scoped>
.custom-headline {
    font-size: 18px;
    /* 修改文字大小为18像素 */
}

.custom-firstline {
    font-size: 16px;
    /* 页面标题 */
    margin-bottom: 20px;
}

.custom-secondline {
    font-size: 14px;
    /* 按钮文字 */
    margin-bottom: 20px;
}

.custom-secondline {
    font-size: 13px;
    /* 信息文本 */
    margin-bottom: 20px;
}

.custom-row {
    margin-bottom: 20px;
}
</style>